<template>
  <div class="topBox">
    <div class="L"><a href="index.html">LOGO</a></div>
    <div class="C">
      <div class="saerchbox">
        <input name="" type="text" placeholder="请输入您要搜索的内容" /><img
          src="/assets/images/ss.png"
        />
      </div>
    </div>
    <div class="R"><img src="/assets/images/tr.png" /></div>
  </div>
  <div class="clear"></div>
  <div class="aui-m-slider">
    <div class="m-slider" data-ydui-slider>
      <div class="slider-wrapper">
        <div class="slider-item">
          <a href="javascript:;"> <img src="/assets/images/banner.jpg" /> </a>
        </div>
        <div class="slider-item">
          <a href="javascript:;"> <img src="/assets/images/banner.jpg" /> </a>
        </div>
        <div class="slider-item">
          <a href="javascript:;"> <img src="/assets/images/banner.jpg" /> </a>
        </div>
        <div class="slider-item">
          <a href="javascript:;"> <img src="/assets/images/banner.jpg" /> </a>
        </div>
      </div>
      <div class="slider-pagination"></div>
    </div>
  </div>
  <div class="clear"></div>
  <div class="lqgwBox">
    <!-- <div class="titbox">先领券/再购物</div>
    <div class="img"><img src="/assets/images/1.jpg" /></div> -->
    <ul>
      <li v-for="item of TypeList" :key="item.id">
        <router-link :to="{path:'/product/product/index',query:{typeid:item.id}}">
          <img :src="item.cover_cdn" />
          <p>{{item.name}}</p>
        </router-link>
      </li>
    </ul>
  </div>
  <div class="clear"></div>
  <div class="ljgqBox">
    <div class="L"><img src="/assets/images/2.jpg" /></div>
    <div class="R">
      <ul>
        <li>
          <div class="bg1"></div>
          <div class="pri_1">￥1899</div>
        </li>
        <li>
          <div class="bg2"></div>
          <div class="pri_2">￥2899</div>
        </li>
      </ul>
    </div>
  </div>
  <div class="clear"></div>
  <div class="contitbox">
    <p>新品<span>•</span>推荐</p>
  </div>
  <div class="clear"></div>
  <ul class="proul">
    <li v-for="item in NewList" :key="item.id">
      <div class="con">
        <a href="detail.html">
          <img :src="item.cover_cdn" />
          <p><span>￥</span>{{item.price}}</p>
        </a>
      </div>
    </li>
  </ul>
  <div class="clear"></div>
  <div class="adBox">
    <img src="/assets/images/banner.jpg" />
  </div>
  <div class="clear"></div>
  <div class="liBox">
    <div class="liBox_1">
      <div class="L">
        <a href="detail.html">
          <div class="bg"></div>
          <div class="tip">礼1</div>
        </a>
      </div>
      <div class="R">
        <a href="detail.html"><img src="/assets/images/9.jpg" /></a>
      </div>
    </div>
    <div class="liBox_2">
      <div class="L">
        <a href="detail.html">
          <div class="bg"></div>
          <div class="tip">礼2</div>
        </a>
      </div>
      <div class="R">
        <a href="detail.html">
          <div class="bg"></div>
          <div class="tip">礼3</div>
        </a>
      </div>
    </div>
  </div>
  <div class="clear"></div>
  <div class="contitbox">
    <p>热销<span>•</span>单品</p>
  </div>
  <div class="clear"></div>
  <ul class="proul_2">
    <li>
      <div class="con">
        <a href="detail.html">
          <img src="/assets/images/12.jpg" />
          <p><span>￥</span>288</p>
        </a>
      </div>
    </li>
    <li>
      <div class="con">
        <a href="detail.html">
          <img src="/assets/images/13.jpg" />
          <p><span>￥</span>198</p>
        </a>
      </div>
    </li>
    <li>
      <div class="con">
        <a href="detail.html">
          <img src="/assets/images/14.jpg" />
          <p><span>￥</span>2368</p>
        </a>
      </div>
    </li>
    <li>
      <div class="con">
        <a href="detail.html">
          <img src="/assets/images/14.jpg" />
          <p><span>￥</span>688</p>
        </a>
      </div>
    </li>
    <li>
      <div class="con">
        <a href="detail.html">
          <img src="/assets/images/12.jpg" />
          <p><span>￥</span>688</p>
        </a>
      </div>
    </li>
    <li>
      <div class="con">
        <a href="detail.html">
          <img src="/assets/images/13.jpg" />
          <p><span>￥</span>688</p>
        </a>
      </div>
    </li>
  </ul>
  <div class="clear"></div>
  <div class="h54"></div>
  <div class="clear"></div>
  <!-- 底部导航 -->
  <Menus />
</template>
<script>
import Menus from 'components/common/Menus.vue'
export default {
    components:{
        Menus
    },
    created() {
      this.list()
    },
    data() {
      return {
        TypeList:[],
        NewList:[],
        HotList:[]
      }
    },
    methods: {
      async list()
      {
        let result = await this.$api.Home()

        let data = result.data

        this.TypeList = data.TypeList

        this.NewList = data.NewList
      }
    },
}
</script>